<template>
  <div class="p-4">
    <Card :tab-list="tabListTitle" v-bind="$attrs" :active-tab-key="activeKey" @tab-change="onTabChange">
      <div v-if="activeKey === 't1'">
        <GradeStatistics />
      </div>
      <div v-if="activeKey === 't2'">
        <SpecialityStatistics />
      </div>
      <div v-if="activeKey === 't3'">
        <SchoolStatistics />
      </div>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Card } from 'ant-design-vue'
import GradeStatistics from './GradeStatistics.vue'
import SpecialityStatistics from './SpecialityStatistics.vue'
import SchoolStatistics from './SchoolStatistics.vue'

const activeKey = ref('t1')
const tabListTitle = [
  {
    key: 't1',
    tab: '年级分类统计',
  },
  {
    key: 't2',
    tab: '高一已报名学生(专业)',
  },
  {
    key: 't3',
    tab: '高一已报名学生(毕业学校)',
  },
]

function onTabChange(key) {
  activeKey.value = key
}

onMounted(() => {
})
</script>

<style lang="less" scoped></style>
